<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <!-- 基本信息区域 -->
      <div class="mb-6">
        <h2 class="text-lg font-medium mb-4 text-[var(--color-text-1)]">基本信息</h2>
        <a-form
            ref="formRef"
            :model="form"
            :rules="rules"
            auto-label-width
            layout="vertical"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="locationName" label="镇街名称" required>
                <a-input v-model="form.locationName" placeholder="请输入镇街名称"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="purchaseIndex" label="购买指标（亩）">
                <a-input v-model="form.purchaseIndex" placeholder="请输入购买指标"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="tradeIndex" label="交易指标（亩）">
                <a-input v-model="form.tradeIndex" placeholder="请输入交易指标"/>
              </a-form-item>
            </a-col>
          </a-row>


        </a-form>
      </div>

      <!-- 按钮区域 -->
      <div class="flex justify-center mt-6">
        <a-space>
          <a-button type="primary" @click="onSubmit">提交</a-button>
          <a-button @click="onCancel">取消</a-button>
        </a-space>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {
  addLindiIndexApi,
  getLindiIndexByLindiIndexIdApi,
  updateLindiIndexByLindiIndexIdApi
} from "~/api/lindi/lindiIndex.js";

// 定义props
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emit
const emit = defineEmits(["ok", "cancel"]);

// 全局实例
const {proxy} = getCurrentInstance();

// 加载字典
const dicts = proxy.LoadDicts([]);

// 表单ref
const formRef = ref(null);

// 加载状态
const spinLoading = ref(false);

// 表单数据
const form = reactive({
  indexId: null,
  locationName: "",
  purchaseIndex: "",
  tradeIndex: "",
});

// 表单校验规则
const rules = {
  locationName: [{required: true, message: "镇街名称不能为空"}],
};

// 组件挂载完成后执行
onMounted(() => {
  // 如果是修改操作，加载数据
  if (props.params.operationType === proxy.operationType.update.type) {
    loadIndexInfo(props.params.indexId);
  }
});

// 加载指标信息
function loadIndexInfo(indexId) {
  spinLoading.value = true;
  getLindiIndexByLindiIndexIdApi(indexId)
      .then((res) => {
        Object.assign(form, res);
      })
      .catch((error) => {
        proxy.$message.error("加载指标信息失败: " + error.message);
      })
      .finally(() => {
        spinLoading.value = false;
      });
}

// 提交表单
function onSubmit() {
  formRef.value.validate().then((valid) => {
    if (valid) {
      spinLoading.value = true;

      // 根据操作类型调用不同的API
      const apiCall =
          props.params.operationType === proxy.operationType.add.type
              ? addLindiIndexApi(form)
              : updateLindiIndexByLindiIndexIdApi(form);

      apiCall
          .then(() => {
            proxy.$message.success(
                props.params.operationType === proxy.operationType.add.type
                    ? "添加成功"
                    : "修改成功"
            );
            emit("ok");
          })
          .catch((error) => {
            proxy.$message.error(
                (props.params.operationType === proxy.operationType.add.type
                    ? "添加失败: "
                    : "修改失败: ") + error.message
            );
          })
          .finally(() => {
            spinLoading.value = false;
          });
    }
  });
}

// 取消
function onCancel() {
  emit("cancel");
}
</script>

<style scoped>
.form-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
